<template>
	<div>
		<el-card class="box-card">
			<div class="dataStatBox">
				<div class="rowFlex pb-lg c-title f-title text-bold  b-1px-b">
					<div>数据概览</div>
					<div class="row">
						<div class="el-button-group">
							<el-button type="primary" size="big" v-if="choseType==0">今日</el-button>
							<el-button type="primary" size="big" plain @click="chosButSow('chose' ,0)"
								v-else>今日</el-button>
							<el-button type="primary" size="big" plain @click="chosButSow('chose',1)">近7日</el-button>
							<el-button type="primary" size="big" plain @click="chosButSow('chose',2)">近30日</el-button>
							<el-button type="primary" size="big" plain @click="chosButSow('chose',3)">今年</el-button>
							<el-button type="primary" size="big" plain @click="chosButSow('chose',4)">自定义</el-button>
						</div>
						<div v-if="choseType==4" class="ml-ep">
							<el-date-picker size="big" v-model="value1" type="daterange" range-separator="-"
								@change="headleTime" value-format="yyyy-MM-dd" :unlink-panels="true"
								start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</div>
					</div>
				</div>

				<div class="class-menu-list flex-warp mt-lg pt-md row">
					<div class="item-child flex-center pb-lg cursor-pointer">
						<div class="itemImg">
							<img src="../assets/indImg/orderCount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.orderCount}}</div>
							<div class="f-caption">订单数</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer">
						<div class="itemImg">
							<img src="../assets/indImg/orderAmount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.orderAmount}}</div>
							<div class="f-caption">订单金额</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer">
						<div class="itemImg">
							<img src="../assets/indImg/orderItemAmount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.orderItemAmount}}</div>
							<div class="f-caption">项目金额</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer">
						<div class="itemImg">
							<img src="../assets/indImg/orderCarAmount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.orderCarAmount}}</div>
							<div class="f-caption">车费金额</div>
						</div>
					</div>

					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/couponAmount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.couponAmount}}</div>
							<div class="f-caption">优惠券优惠金额</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/userCount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.userCount}}</div>
							<div class="f-caption">用户量</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/blackUserCount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.blackUserCount}}</div>
							<div class="f-caption">黑名单用户量</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/bellOrderCount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.bellOrderCount}}</div>
							<div class="f-caption">加钟订单数</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/bellOrderAmount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.bellOrderAmount}}</div>
							<div class="f-caption">加钟订单金额</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/orderRefundCount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.orderRefundCount}}</div>
							<div class="f-caption">退款订单数</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/orderRefundAmount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.orderRefundAmount}}</div>
							<div class="f-caption">退款金额</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/salesmanIncome.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.salesmanIncome}}</div>
							<div class="f-caption">业务员佣金</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/channelIncome.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.channelIncome}}</div>
							<div class="f-caption">渠道商佣金</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
						<div class="itemImg">
							<img src="../assets/indImg/brokerIncome.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.brokerIncome}}</div>
							<div class="f-caption">经纪人佣金</div>
						</div>
					</div>
				</div>
			</div>
		</el-card>

		<el-card class="box-card">
			<div class="dataStatBox">
				<div class="rowFlex pb-lg c-title f-title text-bold  b-1px-b">
					<div>平台总销售额</div>
					<div class="row">
						<div class="el-button-group">
							<el-button type="primary" size="big" plain @click="chosButSow('ord',0)">今日</el-button>
							<el-button type="primary" size="big" plain @click="chosButSow('ord',1)">近7日</el-button>
							<el-button type="primary" size="big" v-if="ordType==2">近30日</el-button>
							<el-button type="primary" size="big" plain @click="chosButSow('ord',2)" v-else>近30日</el-button>
							<el-button type="primary" size="big" plain @click="chosButSow('ord',3)">今年</el-button>
							<el-button type="primary" size="big" plain @click="chosButSow('ord',4)">自定义</el-button>
						</div>

						<div v-if="ordType==4" class="ml-ep">
							<el-date-picker size="big" v-model="valueOrd" type="daterange" range-separator="-"
								@change="headleTime" value-format="yyyy-MM-dd" :unlink-panels="true"
								start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
						</div>
					</div>
				</div>

				<div id="platform" ref="echart" style="width: 90%;height:400px;margin:20px auto; 0" />
			</div>
		</el-card>


		<el-card class="box-card">
			<div class="dataStatBox">
				<div class="rowFlex pb-lg c-title f-title text-bold  b-1px-b">
					<div>用户数据</div>
					<div class="ml-ep">
						<el-date-picker size="big" v-model="valueSim" type="daterange" range-separator="-"
							@change="headleTime" value-format="yyyy-MM-dd" :unlink-panels="true"
							start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
					</div>
				</div>
				<div class="rowFlex">
					<div style="width: 50%;">
						<div class="item-child flex-center pb-lg cursor-pointer mt-lg">
							<div class="itemImg">
								<img src="../assets/indImg/userCount.png" />
							</div>
							<div class="flex-1 ml-lg c-title">
								<div class="f-sm-title text-bold">{{rouderData.userCount}}</div>
								<div class="f-caption">用户量</div>
							</div>
						</div>
						<div class="mt-lg pt-lg pb-lg c-title text-bold">用户比例</div>
						<div id="rouderform" class="charesFrom" />
					</div>
					<div style="width: 50%;">
						<div class="mt-lg pt-lg pb-lg c-title text-bold">新增用户趋势</div>
						<div id="simpleform" class="charesFrom" />
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
	const echarts = require("echarts")

	import {
		indexNum,
		rouderNum,
		indexUserDate,
		indexOrderDate
	} from '@/api/index.js'
	export default {
		data() {
			return {
				dataNum: {},
				value1: '', //数据概况时间选择
				valueSim: '', //用户数据趋势图时间选择
				valueOrd: '', //平台销售额时间选择
				//数据概览butt
				choseType: 0,
				//平台销售butt
				ordType: 2,
				option: {},
				rouderData: [],
				dateValue: [],
				rouderUserData: [],
				orderListData: [],
				pickerMinDate: null,
				pickerRange: 3600 * 1000 * 24 * 30, // 可选择日期范围（一年）
				pickerOptions: {
					onPick: ({
						maxDate,
						minDate
					}) => {
						if (minDate && this.pickerMinDate) {
							this.pickerMinDate = null
						} else if (minDate) {
							this.pickerMinDate = minDate.getTime()
						}
					},
					disabledDate: (time) => {
						if (this.pickerMinDate) {
							return (time.getTime() > (this.pickerMinDate + this.pickerRange)) || (time.getTime() < (
								this.pickerMinDate - this.pickerRange))
						}
						return false
					}

				}
			}
		},
		created() {
			this.getList()
			this.rouderList()
			this.rouderUserList()
			this.headleOrder()
		},
		methods: {
			async getList() {
				this.dataNum = await indexNum({
					type: this.choseType,
					startTime: this.value1[0],
					endTime: this.value1[1]
				})
			},
			// 平台销售额
			async headleOrder() {
				this.orderListData = await indexOrderDate({
					type: this.ordType,
					startTime: this.valueOrd[0],
					endTime: this.valueOrd[1]
				})
				this.initCharts(this.orderListData)
			},
			// 用户数据
			async rouderList() {
				this.rouderData = await rouderNum()
				this.initRouder()
			},
			// 用户数据趋势图
			async rouderUserList() {
				this.rouderUserData = await indexUserDate({
					startTime: this.valueSim[0] ? this.valueSim[0] : '',
					endTime: this.valueSim[1] ? this.valueSim[1] : ''
				})
				this.initSimple()
			},
			headleTime() {
				if (this.value1[1]) this.getList()
				if (this.valueSim[1]) this.rouderUserList()
				if (this.valueOrd[1]) this.headleOrder()
			},
			chosButSow(txt, i) {
				this.value1='' //数据概况时间选择
				this.valueSim='' //用户数据趋势图时间选择
				this.valueOrd='' //平台销售额时间选择
				if (txt == 'chose') {
					this.choseType = i
					if (i != 4) this.getList()
				}
				if (txt == 'ord') {
					this.ordType = i
					if (i != 4) this.headleOrder()
				}
			},
			initCharts(data) {
				let date = []
				for (let i = 0; i < data.orderDateResponseVo.length; i++) {
					date.push(data.orderDateResponseVo[i].date);
				}
				data.orderDateResponseVo.forEach((item, index) => {
					item.value = item.orderPrice
				})
				data.refundDateResponseVo.forEach((item, index) => {
					item.value = item.refundPrice
				})
				//基于准备好的dom，初始化echarts实例
				var chartDom = document.getElementById('platform');
				if (chartDom) {
					let myChart = echarts.init(chartDom)
					myChart.setOption({
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['服务退款', '服务订单收入'],
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: date
						},
						yAxis: {
							type: 'value'
						},
						series: [{
								name: '服务退款',
								type: 'line',
								stack: 'Total',
								smooth: true,
								data: data.refundDateResponseVo
							},
							{
								name: '服务订单收入',
								type: 'line',
								stack: 'Total',
								smooth: true,
								data: data.orderDateResponseVo

							},
						]
					})
				}
			},
			initRouder() {
				//基于准备好的dom，初始化echarts实例
				var chartDom = document.getElementById('rouderform');
				if (chartDom) {
					let myChart = echarts.init(chartDom)
					myChart.setOption({
						tooltip: {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							formatter: (name) => {
								let target, rate, arr, item
								item = this.rouderData.userResponseVoList
								for (let i = 0; i < item.length; i++) {
									if (item[i].name === name) {
										target = item[i].value
										rate = item[i].rate
									}
								}
								return arr = name + '  ' + target + '人' + '  ' + rate + '%'
							}
						},
						series: [{
							type: 'pie',
							radius: '50%',
							data: this.rouderData.userResponseVoList,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					})
				}
			},
			initSimple() {
				let date = [];
				for (let i = 0; i < this.rouderUserData.length; i++) {
					date.push(this.rouderUserData[i].date);
				}
				var chartDom = document.getElementById('simpleform');
				if (chartDom) {
					let myChart = echarts.init(chartDom)
					myChart.setOption({
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: date
						},
						yAxis: {
							type: 'value',
							boundaryGap: [0, '100%']
						},
						series: [{
							name: 'Fake Data',
							type: 'line',
							smooth: true,
							itemStyle: {
								color: 'rgb(255, 70, 131)'
							},
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgb(255, 158, 68)'
									},
									{
										offset: 1,
										color: 'rgb(255, 70, 131)'
									}
								])
							},
							data: this.rouderUserData
						}]
					})
				}
			},
			formatDate(datetime, type) {
				const time = new Date(datetime)
				const year = time.getFullYear()
				const month = (time.getMonth() + 1).toString().padStart(2, '0')
				const date = (time.getDate()).toString().padStart(2, '0')
				return type === 'start' ? year + '-' + month + '-' + date + ' ' + '00' + ':' + '00' + ':' + '00' : year +
					'-' + month + '-' + date + ' ' + '23' + ':' + '59' + ':' + '59'
			},
		}
	}
</script>

<style lang="less">
	.flex-warp {
		flex-wrap: wrap;
	}

	.pt-md {
		padding-top: 10px;
	}

	.mt-lg {
		margin-top: 15px;
	}

	.class-menu-list .item-child {
		width: 25%;
	}

	.cursor-pointer {
		cursor: pointer;
	}

	.flex-center {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
	}

	.pb-lg {
		padding-bottom: 15px;
	}

	.flex-1 {
		-webkit-box-flex: 1;
		flex: 1;
	}

	.ml-lg {
		margin-left: 15px;
	}

	.c-title {
		color: #333333;
	}

	.text-bold {
		font-weight: bold;
	}

	.f-caption {
		font-size: 12px;
	}

	.f-sm-title {
		font-size: 20px;
	}

	.mt-lg {
		margin-top: 15px;
	}

	.box-card {
		margin: 20px;
	}

	.ml-ep {
		margin-left: 10px;
	}

	.b-1px-b {
		border-bottom: 1px solid rgba(0, 0, 0, .1);
	}

	.itemImg {
		width: 50px;
		height: 50px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.charesFrom {
		width: 600px;
		height: 400px;
		margin: auto;
	}
</style>